<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>人员分配</title>
	<meta name="decorator" content="default"/>
	<link href="${ctxStatic}/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
		  .row{
		  	padding: 6px 20px;
		  	margin: 0;
		  	border-bottom: 1px solid #ccc;
		  }
		  .col-md-4 {
		  	 float: left;
		     width: 20%;
		  }
		  .col-md-8 {
		  	float: right;
		  	width:79%
		  }
		.assign-box{            
        }
        .assign-info{
            float: left;
            width: 225px;
            margin: 10px;
            border: 1px solid #e3e4e8;
            border-radius: 6px;
            position: relative;
        } 
        .assign-name{
            border-bottom: 1px solid #eceef1;
            padding: 15px 20px;
            color: #777c85;
            font-size: 12px;
        }
        .assign-name b{
            font-size: 14px;
            color: #494c53;
        }
        .assign-tel{
            padding: 2px 20px;
            background: #fafcfd;
        }            
        .assign-tel p{
            padding:6px 0;
            font-size: 14px; 
            border-bottom: 1px solid #eceef1;
            color: #adb2bf;
        }
        .assign-edit{
        	position: absolute;
		    top: 10px;
		    right: 10px;
		    cursor: pointer;
		    color: #adb2bf;
        }
        .assign-give{
        	position: absolute;
		    top: 10px;
		    right: 50px;
		    cursor: pointer;
		    color: #adb2bf;
        }
	</style>
	<script type="text/javascript">
		$(function(){
			//初始化为所有打勾，用位与操作
			$("#assignAuth").find("input[type='checkbox']").each(function(){
				var code = parseInt($(this).attr("code"));
				var val = parseInt($(this).val());
				var r = code & val;
				if(r == val){
					$(this).attr("checked","true");
				}
			});
			$("#assignButton").click(function(){
				top.$.jBox.open("iframe:${ctx}/ins/insTable/usertotable?id=${insTable.id}", "分配人员",810,$(top.document).height()-240,{
					buttons:{"确定分配":"ok", "清除已选":"clear", "关闭":true}, bottomText:"通过选择部门，然后为列出的人员分配项目。",submit:function(v, h, f){
						var pre_ids = h.find("iframe")[0].contentWindow.pre_ids;
						var ids = h.find("iframe")[0].contentWindow.ids;
						//nodes = selectedTree.getSelectedNodes();
						if (v=="ok"){
							// 删除''的元素
							if(ids[0]==''){
								ids.shift();
								pre_ids.shift();
							}
							if(pre_ids.sort().toString() == ids.sort().toString()){
								top.$.jBox.tip("未给数据表【${insTable.name}】分配新成员！", 'info');
								return false;
							};
					    	// 执行保存
					    	var idsArr = "";
					    	for (var i = 0; i<ids.length; i++) {
					    		idsArr = (idsArr + ids[i]) + (((i + 1)== ids.length) ? '':',');
					    	}
					    	$('#idsArr').val(idsArr);
					    	return servicePassword(submitAssignTableForm,$("#username").val());
						} else if (v=="clear"){
							h.find("iframe")[0].contentWindow.clearAssign();
							return false;
		                }
					}, loaded:function(h){
						$(".jbox-content", top.document).css("overflow-y","hidden");
					}
				});
			});
			
			$("#assignAuthButton").click(function(){
				servicePassword(submitInputForm,$("#username").val());
			});
			
			$(".checkRow").click(function(){
				var idx = $(this).attr("idx");
				if($(this).attr("checked")){
					$(".check_"+idx).each(function(){
						$(this).attr("checked","checked");
					});
				}else{
					$(".check_"+idx).each(function(){
						$(this).removeAttr("checked");
					});
				}
			});
			$(".checkColumn").click(function(){
				var val = $(this).val();
				if($(this).attr("checked")){
					$("input[type=checkbox][value="+val+"]").each(function(){
						$(this).attr("checked","checked");
					});
				}else{
					$("input[type=checkbox][value="+val+"]").each(function(){
						$(this).removeAttr("checked");
					});
				}
			});
			$("#checkAll").click(function(){
				if($(this).attr("checked")){
					$("input[type=checkbox]").each(function(){
						$(this).attr("checked","checked");
					});
				}else{
					$("input[type=checkbox]").each(function(){
						$(this).removeAttr("checked");
					});
				}
			});
		});
		//提交分配人员表单
		function submitAssignTableForm(){
			loading('正在提交，请稍等...');
			$('#assignTableForm').submit();
			top.$.jBox.close(true);
			return true;
		}
		//提交分配权限表单
		function submitInputForm(){
			getCode();
			loading('正在提交，请稍等...');
			$('#inputForm').submit();
			return true;
		}
		//计算授权码
		function getCode(){
			$(".code").each(function(){
				var obj = $(this);//这个this代表当前行的code
				var idx = obj.attr("idx");
				var code = 0;
				$(".check_"+idx).each(function(){
					//这个this代表的是遍历的每一个checkbox
					if($(this).attr("checked")){
						code+=parseInt($(this).val());
					}
				});
				$("#code_"+idx).val(code);
			});
		}
		</script>
</head>
<body>
	<div class="container-fluid breadcrumb">
		<div class="row-fluid">
			<span class="span4">主名称: <b>${insTable.name}</b></span>
			<span class="span4">次名称: ${insTable.fullName}</span>
		</div>
		<div class="row-fluid">
			<span class="span4">分类: ${insTable.category.name}</span>
			<span class="span4">创建人: ${insTable.createName}</span>
		</div>
	</div>
	<sys:message content="${message}"/>
	<div class="box box-bottom"> 
        <div class="assign-box">
        	<div id="assignAuth">
				<form:form id="inputForm" modelAttribute="insTable" action="${ctx}/ins/insTable/assignAuth" method="post" class="breadcrumb form-search">
				<input type="hidden" id="username" value="${fns:getUser().name}"/>
				<input type="hidden" name="id" value="${insTable.id}"/>
		        <c:forEach items="${insTable.insTableUserList}" varStatus="status" var="tableUser">
			        <div class="row">
			        	<div class="col-md-4">人员：${tableUser.user.name}</div>
			            <div class="col-md-8" id="authTable${status.index}">
							  <input type="hidden" id="code_${status.index}" class="code" idx="${status.index}" name="insTableUserList[${status.index}].code" value="${tableUser.code}"/>
							  <input type="hidden" id="user_${status.index}" name="insTableUserList[${status.index}].user.id" value="${tableUser.user.id}"/>
							  <input type="hidden" id="table_${status.index}" name="insTableUserList[${status.index}].table.id" value="${insTable.id}"/>
							<label class="checkbox-inline">
				              <input id="code_${status.index}_64" type="checkbox" onclick="return  false;" idx="${status.index}" value="64" code="${tableUser.code}" class="check_${status.index}"/>导出
							</label>
							<label class="checkbox-inline">
				              <input id="code_${status.index}_32" type="checkbox" onclick="return  false;" idx="${status.index}" value="32" code="${tableUser.code}" class="check_${status.index}"/>导入
							</label>
							<label class="checkbox-inline">
				              <input id="code_${status.index}_16" type="checkbox" onclick="return  false;" idx="${status.index}" value="16" code="${tableUser.code}" class="check_${status.index}"/>打印
							</label>
							<label class="checkbox-inline">
								<input id="code_${status.index}_8" type="checkbox" onclick="return  false;" idx="${status.index}" value="8" code="${tableUser.code}" class="check_${status.index}"/>数据表修改
							</label>
							<label class="checkbox-inline">
								<input id="code_${status.index}_4" type="checkbox" onclick="return  false;" idx="${status.index}" value="4" code="${tableUser.code}" class="check_${status.index}"/>数据表删除
							</label>
							<label class="checkbox-inline">
								<input id="code_${status.index}_2" type="checkbox" onclick="return  false;" idx="${status.index}" value="2" code="${tableUser.code}" class="check_${status.index}"/>绑定模板
							</label>
							<label class="checkbox-inline">
								<input id="code_${status.index}_1" type="checkbox" onclick="return  false;" idx="${status.index}" value="1" code="${tableUser.code}" class="check_${status.index}"/>数据填报
							</label>
							<label class="checkbox-inline">
				              <input id="code_${status.index}_128" type="checkbox" onclick="return  false;" idx="${status.index}" value="128" code="${tableUser.code}" class="check_${status.index}"/>数据修改
							</label>
			            </div>
					</div>
		        </c:forEach>
		        </form:form>
		    </div>
        	<c:forEach items="${userList}" var="user">                
	            <div class="assign-info">
	               <div class="assign-name">
	                  <b>${user.name}</b><br>
	                  归属公司：${user.company.name}<br>
	                  归属部门：${user.office.name}<br>
	                  登录名：${user.loginName}<br>	                  
	               </div>
	               <div class="assign-tel">
	                   <p>
	                      <span class="fa fa-phone-square"></span> ${user.phone}
	                   </p>
	                   <p>
	                      <span class="fa fa-phone-square"></span> ${user.mobile}
	                   </p>
	               </div>
	               <shiro:hasPermission name="sys:role:edit">
				    <a class="fa fa-trash-o assign-edit" href="${ctx}/pro/project/outProject?userId=${user.id}&projectId=${project.id}" 
					onclick="return confirmx('确认要将用户<b>[${user.name}]</b>从<b>[${project.name}]</b>项目中移除吗？', this.href)">移除</a>
			       </shiro:hasPermission>
	            </div>
            </c:forEach>
        </div>
    </div>
	<!-- <table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead><tr><th>归属公司</th><th>归属部门</th><th>登录名</th><th>姓名</th><th>电话</th><th>手机</th><shiro:hasPermission name="sys:user:edit"><th>操作</th></shiro:hasPermission></tr></thead>
		<tbody>
		<c:forEach items="${userList}" var="user">
			<tr>
				<td>${user.company.name}</td>
				<td>${user.office.name}</td>
				<td>${user.loginName}</td>
				<td>${user.name}</td>
				<td>${user.phone}</td>
				<td>${user.mobile}</td>
				<shiro:hasPermission name="sys:role:edit"><td>
					<a href="${ctx}/pro/project/outProject?userId=${user.id}&projectId=${project.id}" 
						onclick="return confirmx('确认要将用户<b>[${user.name}]</b>从<b>[${project.name}]</b>角色中移除吗？', this.href)">移除</a>
				</td></shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table> -->
</body>
</html>
